ANTOOZA-FRONTEND/app/(main)/watch/[identifier]/ChatSidebar.tsx

'use client';

/**
 * [DEPRECATED — 2026-04-26] dpot SignalR 채팅 사이드바
 *
 * Watch 페이지에선 YouTube Live Chat iframe 으로 대체되어 사용 중지.
 * 코드는 quota 승인 후 재활성화를 위해 보존.
 *
 * 재활성화 가이드: ~/.claude/projects/E--workspace-dpot/memory/plan_dpot_chat_reactivate_after_quota.md
 *
 * 이 파일을 import 하면 useChat / LeaderboardPanel 도 함께 동작합니다.
 * 일반적으로는 import 하지 마세요.
 */

import { useState, useRef, useEffect, useCallback, type CSSProperties, type KeyboardEvent } from 'react';
import useAuth from '@/hooks/useAuth';
import useChat from '@/hooks/useChat';
import { fetchApi } from '@/lib/utils/client';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUsers, faEye, faEllipsisVertical, faPaperPlane, faTrashCan, faMagnifyingGlassPlus, faMagnifyingGlassMinus, faRotateRight, faClock, faCoins, faCrown, faRankingStar } from '@fortawesome/free-solid-svg-icons';
import type { LiveLeaderboardResponse } from '@/types/response/channel/leaderboard';
import LeaderboardPanel from './LeaderboardPanel';
import './chat-sidebar.scss';

const MIN_FONT_SIZE = 12;
const MAX_FONT_SIZE = 22;
const DEFAULT_FONT_SIZE = 16;

type ChatSidebarProps = {
	channelSID: string;
	onDonate?: () => void;
};

export default function ChatSidebar({ channelSID, onDonate }: ChatSidebarProps) {
	const { isAuthenticated } = useAuth();
	const { messages, systemMessages, participantCount, participants, sendMessage, clearMessages, refreshChat, requestParticipants, chatConnected } = useChat(channelSID);
	const [inputValue, setInputValue] = useState('');
	const [fontSize, setFontSize] = useState(DEFAULT_FONT_SIZE);
	const [showMenu, setShowMenu] = useState(false);
	const [showTime, setShowTime] = useState(false);
	const messagesRef = useRef<HTMLDivElement>(null);
	const isAutoScrollRef = useRef(true);
	const [showParticipants, setShowParticipants] = useState(false);
	const [showLeaderboard, setShowLeaderboard] = useState(false);
	const [myXp, setMyXp] = useState<number|null>(null);
	const menuRef = useRef<HTMLDivElement>(null);

	// 내 XP 주기 갱신 (30초마다)
	useEffect(() => {
		if (!isAuthenticated) {
			return;
		}
		let active = true;
		const fetchMyXp = async () => {
			try {
				const res = await fetchApi<LiveLeaderboardResponse>(
					`/api/channel/${channelSID}/live-leaderboard?maxRank=1`,
					{ silent: true }
				);
				if (active && res.data) {
					setMyXp(res.data.myRank?.xp ?? 0);
				}
			} catch {
				// ignore
			}
		};
		fetchMyXp();
		const interval = setInterval(fetchMyXp, 30000);
		return () => {
			active = false;
			clearInterval(interval);
		};
	}, [channelSID, isAuthenticated]);

	// 메시지 + 시스템 메시지를 시간순 병합
	const mergedMessages = (() => {
		const items: Array<
			| { type: 'chat'; data: typeof messages[number] }
			| { type: 'system'; data: typeof systemMessages[number] }
		> = [];

		messages.forEach((m) => items.push({ type: 'chat', data: m }));
		systemMessages.forEach((m) => items.push({ type: 'system', data: m }));

		items.sort((a, b) => {
			const timeA = a.type === 'chat' ? a.data.sentAt : a.data.receivedAt;
			const timeB = b.type === 'chat' ? b.data.sentAt : b.data.receivedAt;
			return new Date(timeA).getTime() - new Date(timeB).getTime();
		});

		return items;
	})();

	// 자동 스크롤
	useEffect(() => {
		const el = messagesRef.current;
		if (!el || !isAutoScrollRef.current) return;
		el.scrollTop = el.scrollHeight;
	}, [mergedMessages.length]);

	// 스크롤 이벤트로 자동 스크롤 제어
	const handleScroll = useCallback(() => {
		const el = messagesRef.current;
		if (!el) return;
		const threshold = 50;
		isAutoScrollRef.current = el.scrollTop + el.clientHeight >= el.scrollHeight - threshold;
	}, []);

	// 메뉴 외부 클릭 닫기
	useEffect(() => {
		if (!showMenu) return;
		const handleClick = (e: MouseEvent) => {
			if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
				setShowMenu(false);
			}
		};
		document.addEventListener('mousedown', handleClick);
		return () => document.removeEventListener('mousedown', handleClick);
	}, [showMenu]);

	const handleSend = useCallback(() => {
		if (!inputValue.trim()) return;
		sendMessage(inputValue);
		setInputValue('');
	}, [inputValue, sendMessage]);

	const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
		if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
			e.preventDefault();
			handleSend();
		}
	}, [handleSend]);

	const handleClear = useCallback(() => {
		clearMessages();
		setShowMenu(false);
	}, [clearMessages]);

	const handleFontIncrease = useCallback(() => {
		setFontSize((prev) => Math.min(prev + 2, MAX_FONT_SIZE));
		setShowMenu(false);
	}, []);

	const handleFontDecrease = useCallback(() => {
		setFontSize((prev) => Math.max(prev - 2, MIN_FONT_SIZE));
		setShowMenu(false);
	}, []);

	const handleRefresh = useCallback(() => {
		setShowMenu(false);
		refreshChat();
	}, [refreshChat]);

	const handleToggleTime = useCallback(() => {
		setShowTime((prev) => !prev);
		setShowMenu(false);
	}, []);

	const handleShowParticipants = useCallback(() => {
		requestParticipants();
		setShowParticipants(true);
	}, [requestParticipants]);

	const handleCloseParticipants = useCallback(() => {
		setShowParticipants(false);
	}, []);

	const formatTime = (dateStr: string) => {
		const date = new Date(dateStr);
		return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
	};

	return (
		<div className='chat-sidebar'>
			{/* 헤더 */}
			<div className='chat-header'>
				<div className='chat-header-left'>
					<button
						type='button'
						className='chat-header-viewers'
						title='실시간 시청자 · 참여자 목록 보기'
						onClick={handleShowParticipants}
						aria-label={`실시간 시청자 ${participantCount}명 · 참여자 목록 열기`}
					>
						<FontAwesomeIcon icon={faEye} />
						<span>{participantCount.toLocaleString()}</span>
					</button>
				</div>
				<div className='chat-header-actions'>
					{isAuthenticated && myXp !== null && (
						<button
							type='button'
							className='chat-my-xp'
							title='내 XP · 리더보드 열기'
							onClick={() => setShowLeaderboard(true)}
						>
							<FontAwesomeIcon icon={faRankingStar} />
							<span>{myXp.toLocaleString()}XP</span>
						</button>
					)}
					<div className='chat-menu-wrapper' ref={menuRef}>
						<button type='button' title='메뉴' onClick={() => setShowMenu((prev) => !prev)}>
							<FontAwesomeIcon icon={faEllipsisVertical} />
						</button>
						{showMenu && (
							<div className='chat-menu'>
								<button type='button' onClick={handleClear}>
									<FontAwesomeIcon icon={faTrashCan} />
									<span>채팅 지우기</span>
								</button>
								<button type='button' onClick={handleToggleTime}>
									<FontAwesomeIcon icon={faClock} />
									<span>시간 {showTime ? '숨기기' : '보기'}</span>
								</button>
								<button type='button' onClick={handleFontIncrease} disabled={fontSize >= MAX_FONT_SIZE}>
									<FontAwesomeIcon icon={faMagnifyingGlassPlus} />
									<span>글자 크게</span>
								</button>
								<button type='button' onClick={handleFontDecrease} disabled={fontSize <= MIN_FONT_SIZE}>
									<FontAwesomeIcon icon={faMagnifyingGlassMinus} />
									<span>글자 작게</span>
								</button>
								<button type='button' onClick={handleRefresh}>
									<FontAwesomeIcon icon={faRotateRight} />
									<span>새로고침</span>
								</button>
							</div>
						)}
					</div>
				</div>
			</div>

			{/* 메시지 영역 */}
			<div className='chat-messages' ref={messagesRef} onScroll={handleScroll} style={{ '--chat-font-size': `${fontSize}px` } as CSSProperties}>
				{!chatConnected && (
					<div className='chat-system'>채팅 서버에 연결 중...</div>
				)}
				{mergedMessages.map((item, index) => {
					if (item.type === 'system') {
						return (
							<div key={`sys-${item.data.id}`} className='chat-system'>
								{item.data.content}
							</div>
						);
					}

					const msg = item.data;
					const badgeUrl = msg.titleIconUrl || msg.gradeImageUrl || msg.memberIcon;
					const badgeAlt = msg.titleName ?? '';
					const isTopRank = typeof msg.leaderboardRank === 'number' && msg.leaderboardRank >= 1 && msg.leaderboardRank <= 3;
					return (
						<div key={`msg-${index}`} className='chat-message'>
							{showTime && <span className='chat-message-time'>{formatTime(msg.sentAt)}</span>}
							{isTopRank && (
								<span className={`chat-message-crown chat-message-crown--rank${msg.leaderboardRank}`} title={`리더보드 ${msg.leaderboardRank}위`}>
									<FontAwesomeIcon icon={faCrown} />
								</span>
							)}
							{badgeUrl && (
								<img src={badgeUrl} alt={badgeAlt} className='chat-message-badge' aria-hidden={!badgeAlt} />
							)}
							<span className='chat-message-name' style={msg.titleColor ? ({ '--title-color': msg.titleColor } as CSSProperties) : undefined}>
								{msg.memberName || msg.memberSID}
							</span>
							<span className='chat-message-content'>{msg.content}</span>
						</div>
					);
				})}
			</div>

			{/* 입력 영역 */}
			<div className='chat-input-area'>
				{isAuthenticated ? (
					<div className='chat-input-row'>
						<input
							type='text'
							placeholder='메시지를 입력하세요'
							value={inputValue}
							onChange={(e) => setInputValue(e.target.value)}
							onKeyDown={handleKeyDown}
							maxLength={500}
							disabled={!chatConnected}
						/>
						{onDonate && (
							<button type='button' title='후원하기' onClick={onDonate} className='chat-donate-btn'>
								<FontAwesomeIcon icon={faCoins} />
							</button>
						)}
						<button type='button' title='전송' onClick={handleSend} disabled={!chatConnected || !inputValue.trim()}>
							<FontAwesomeIcon icon={faPaperPlane} />
						</button>
					</div>
				) : (
					<div className='chat-login-notice'>
						<a href='/login'>로그인</a> 후 채팅에 참여하세요
					</div>
				)}
			</div>

			{/* 리더보드 패널 */}
			<LeaderboardPanel
				channelSID={channelSID}
				open={showLeaderboard}
				onClose={() => setShowLeaderboard(false)}
			/>

			{/* 참여자 목록 패널 */}
			{showParticipants && (
				<>
					<div className='chat-participants-overlay' onClick={handleCloseParticipants} />
					<div className='chat-participants-dialog'>
						<div className='chat-participants-header'>
							<h3>참여자 ({participantCount}명)</h3>
							<button type='button' onClick={handleCloseParticipants} aria-label='닫기'>&times;</button>
						</div>
						<ul className='chat-participants-list'>
							{participants.length === 0 && participantCount === 0 ? (
								<li className='chat-participants-empty'>참여자가 없습니다</li>
							) : (
								<>
									{participants.map((p) => (
										<li key={p.memberName}>
											<FontAwesomeIcon icon={faUsers} className='chat-participant-icon' />
											<span>{p.memberName}</span>
										</li>
									))}
									{participantCount - participants.length > 0 && (
										<li className='chat-participants-guest'>
											<span>비회원 {participantCount - participants.length}명</span>
										</li>
									)}
								</>
							)}
						</ul>
					</div>
				</>
			)}
		</div>
	);
}